<template>
	<view>
		<view>
			<view class="cu-card case" :class="isCard?'no-card':''">
				<view class="cu-item shadow">
					<view class="image" @click="check">
						<swiper
							class=" square-dot solid  screen-swiper padding-top-xs padding-left-xs padding-right-xs "
							:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500"
							:style="{height: 150+'px'}">
							<swiper-item v-for="(item,index) in imgList" :key="index">
								<image :src="item.url" mode="aspectFill" v-if="item.type=='image'">
								</image>
								<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
									objectFit="cover" v-if="item.type=='video'"></video>
							</swiper-item>
						</swiper>
						<view class="cu-tag bg-blue"></view>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{invitation.content}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+publisher.avatarUrl+')'}]">
							</view>
							<view class="content flex-sub">
								<view class="text-grey text-bold text-black">{{publisher.nickName}}</view>
								<view class="text-gray text-df flex justify-between">
									{{invitation.createTime}}
									<view class="text-gray text-df">
										<text class="cuIcon-attentionfill margin-lr-xs"></text>{{invitation.checkCount}}
										<text class="cuIcon-appreciatefill margin-lr-xs"
											:class="like?'text-red':'text-grey'" @click="likeOrNot()"></text>
										{{invitation.favoriteCount}}
										<text class="cuIcon-messagefill margin-lr-xs"></text> {{invitation.commentCount}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				checkCount: 10,
				commentsCount: 50,
				likeCount: 30,
				url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
				content: "正义的天室",
				time: '2021-03-14 20:14:35',
				towerStart: 0,
				// userInfo: {
				// 	avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
				// 	nickname: 'YI'
				// },
				like: true,
				infos: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}]
			}
		},
		props: {
			imgList: {
				type:Array,
				default:[]
			},
			publisher: {
				type:Object,
				default:{}
			},
			invitation: {
				type: Object,
				default:{}
			}
		},
		created() {
			this.TowerSwiper("infos")
		},
		methods: {
			check() {
				let that = this
				uni.navigateTo({
					url: `/pages/home/itemDetai/itemDetai?item=` + that.$props.invitation.id,
					success(res) {
						that.$data.checkCount++;
					}
				})
			},
			likeOrNot() {
				this.$data.like = !this.$data.like;
				if (this.$data.like) {
					this.$data.likeCount++;
				} else {
					this.$data.likeCount--;
				}
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			}
		},
		beforeDestroy() {
			// console.log(this.$data.checkCount)
			// 销毁时，调用接口上传信息 更新查看和点赞信息
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
